import styles from './index.module.scss'
import { generateDate, getDayOfWeek } from './util'
import cm from 'classnames'
import { orderFocus, cancelOrderFocus } from '@/api/sports'
import { userInfo } from '@/store'
import { useRecoilValue } from 'recoil'
import message from '@c/message'
import { formatDate } from '@/utils/date'
import { useSolveStickyPower } from '@/utils/hooks'
import Link from 'next/link'

const Index = props => {
  const { token } = useRecoilValue(userInfo)
  const { data, today, onSuccess, onLogin } = props
  const { year, month, day } = generateDate(data.date)
  const weekDay = getDayOfWeek(`${year}/${month}/${day}`)

  // 预约赛事

  const orderRace = async (e, { matchID: id }) => {
    e.stopPropagation()
    e.preventDefault()
    if (!token) {
      onLogin?.()
      return
    }
    const res = await orderFocus({ id }, token)
    if (res?.code === 0) {
      message({ content: '预约成功' })
      onSuccess?.(id, 3)
    }
  }
  // 取消预约赛事
  const cancelOrder = async (e, { matchID: id }) => {
    e.stopPropagation()
    e.preventDefault()
    if (!token) {
      onLogin?.()
      return
    }
    const res = await cancelOrderFocus({ id }, token)
    if (res?.code === 0) {
      message({ content: '取消预约成功' })
      onSuccess?.(id, 0)
    }
  }
  //按钮分类
  const btnNode = item => {
    switch (item.status) {
      case 0:
        return (
          <div className={cm(styles.childRight0, 'hideWhenPhone')} onClick={e => orderRace(e, item)}>
            预约
          </div>
        )
      case 1:
        return <div className={cm(styles.childRight1, 'hideWhenPhone')}>直播中</div>
      case 2:
        return <div className={cm(styles.childRight2, 'hideWhenPhone')}>回放</div>
      case 3:
        return (
          <div className={cm(styles.childRight3, 'hideWhenPhone')} onClick={e => cancelOrder(e, item)}>
            已预约
          </div>
        )
      default:
        return <div className={cm(styles.childRight2, 'hideWhenPhone')}>回放</div>
    }
  }

  // 队伍内容分类
  const teamNode = item => {
    if (!Array.isArray(item.confrontTeams) || item.confrontTeams.length < 2) {
      return item.title
    }
    const team = item.confrontTeams
    return (
      <>
        <span className={styles.middleTeam} style={{ textAlign: 'right' }}>
          {team[0].name}
        </span>
        <div className={styles.mainMain}>
          <img loading="lazy" src={team[0].image} alt={team[0].name} className={styles.img} />
          {item.status != 1 && item.status != 2 ? (
            <>
              <span className={styles.core}>--</span>
              <span className={styles.noStart}>未开始</span>
              <span className={styles.core}>--</span>
            </>
          ) : null}
          {item.status == 1 ? (
            <>
              <span className={cm(styles.core, styles.coreLive)}>{team[0].score}</span>
              <span className={styles.statusLive}>直播中</span>
              <span className={cm(styles.core, styles.coreLive)}>{team[1].score}</span>
            </>
          ) : null}
          {item.status == 2 ? (
            <>
              <span className={styles.core}>{team[0].score}</span>
              <span className={styles.ended}>已结束</span>
              <span className={styles.core}>{team[1].score}</span>
            </>
          ) : null}
          <img loading="lazy" src={team[1].image} alt={team[1].name} className={styles.img} />
        </div>
        <span className={styles.middleTeam}>{team[1].name}</span>
      </>
    )
  }

  //按钮分类移动端
  const btnNodePhone = item => {
    switch (item.status) {
      case 0:
        return (
          <div className={cm(styles.phoneStatus0)} onClick={e => orderRace(e, item)}>
            <img loading="lazy" src="/images/order.png" alt="预约" />
            <span>预约</span>
          </div>
        )
      case 1:
        return <div className={cm(styles.phoneStatus1)}>直播中</div>
      case 2:
        return <div className={cm(styles.phoneStatus2)}>已结束</div>
      case 3:
        return <div className={cm(styles.phoneStatus2)}>已预约</div>
      default:
        return <div className={cm(styles.phoneStatus2)}>已结束</div>
    }
  }

  // sticky兼容性
  useSolveStickyPower()
  return (
    <div className={styles.program}>
      <div className={cm(styles.itemDate, 'sticky')} id={`date-${data.date}`}>
        {today == data.date ? '今天' : `${month}月${day}日`} {weekDay}
      </div>
      <div className={styles.programItem}>
        {data.matchList?.map((item, index) => {
          const team = item.confrontTeams
          const dateObj = formatDate(item.startTime)
          return (
            <Link href={`/sports/live/${item.matchID}`} className={styles.programChild} key={index}>
              <div className={cm(styles.childLeft, 'hideWhenPhone')}>
                <div>
                  {dateObj.hour}:{dateObj.minutes}
                </div>
                <div>{item.competition}</div>
              </div>
              <div className={cm(styles.childMiddle, 'hideWhenPhone')}>{teamNode(item)}</div>
              {btnNode(item)}

              <div className={cm(styles.itemPhone, 'hideWhenPc')}>
                <div className={styles.date}>
                  <p>{item.keyWord.slice(-5)}</p>
                  <p className="textEllipsis">{item.competition}</p>
                </div>
                <div className={styles.itemCenter}>
                  <div className={styles.team}>
                    {team && team.length >= 2 ? (
                      <>
                        <div>
                          <img loading="lazy" src={team[0].image} alt={team[0].name} className={styles.img} />
                          <span className={cm(styles.name, 'textEllipsis')}>{team[0].name}</span>
                        </div>
                        <div>
                          <img loading="lazy" src={team[1].image} alt={team[0].name} className={styles.img} />
                          <span className={cm(styles.name, 'textEllipsis')}>{team[1].name}</span>
                        </div>
                      </>
                    ) : (
                      item.title
                    )}
                  </div>
                  <div className={styles.score}>
                    {team && team.length >= 2 ? (
                      <>
                        <p>{item.status == 0 || item.status == 3 ? '--' : team[0].score}</p>
                        <p>{item.status == 0 || item.status == 3 ? '--' : team[1].score}</p>
                      </>
                    ) : null}
                  </div>
                </div>
                {btnNodePhone(item)}
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}

export default Index
